<!DOCTYPE html>
<html lang="ch">

<head>
  <meta charset="UTF-8">
  <!--这一句很关键，让手机的缩放格式与电脑相同，以防出现手机显示的大小与电脑不同-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公告详情</title>

  <!--本地版-->
  <link rel="stylesheet" href="plugins/elementUI_2.15.7/index.css" />
  <script src="plugins/vue_2.6.14/vue.js"></script>
  <script src="plugins/elementUI_2.15.7/index.js"></script>
  <script src="plugins/axios/axios_0_27_2.min.js"></script>
  <script src="plugins/jquery/jquery-3.3.1.min.js"></script>

  <!-- 公共样式 -->
  <link rel="stylesheet" href="css/common/common.css">

  <!-- 引入头部 -->
  <script src="js/common/header.js"></script>
  <link rel="stylesheet" href="css/common/header.css">

  <!-- 接口地址全局变量 -->
  <script src="/js/common/jieKouAddress.js"></script>
  <!-- 全局函数 -->
  <script src="/js/common/commonMethod.js"></script>

  <link rel="stylesheet" href="css/notice.css" />
</head>

<body>

  <div id="app">
    <!-- 公共头部 -->
    <header id="headerContent"></header>
    <div class="content">
      <div class="title x-box">
        <div class="text y-box">公告</div>
        <div class="y-box">
          <div class="milkbox-button" @click="noticeManageDialogVisible = true">公告管理</div>
        </div>
        <!-- 弹出的窗口 -->
        <el-dialog title="公告管理" :visible.sync="noticeManageDialogVisible" :width="noticeManageDialogWidth">
          <div :class="{'milkbox-disabled': isNoticeChanging}">
            <!-- 表单部分 -->
            <el-form :model="addNoticeFormData" :rules="addNoticeFormRules" ref="addNoticeForm">
              <el-form-item label="公告标题" prop="title">
                <el-input v-model="addNoticeFormData.title" placeholder="请输入公告标题" autocomplete="off" maxlength="64"
                  show-word-limit>
                </el-input>
              </el-form-item>
              <el-form-item label="公告内容" prop="content">
                <el-input type="textarea" placeholder="请输入公告内容" v-model="addNoticeFormData.content" maxlength="512"
                  show-word-limit :autosize="{ minRows: 6, maxRows: 15}">
                </el-input>
              </el-form-item>
            </el-form>
            <!-- 按钮部分 -->
            <div slot="footer" class="dialog-footer x-box">
              <div class="milkbox-button milkbox-button-danger" :style="{ 'font-size': dialogFontSize }"
                @click="updateNoticeRedis">更新缓存</div>
              <div class="milkbox-button" :style="{ 'font-size': dialogFontSize }" @click="sendNotice('addNoticeForm')">添加</div>
              <div class="milkbox-button milkbox-button-info" :style="{ 'font-size': dialogFontSize }"
                @click="resetForm('addNoticeForm')">
                取消</div>
            </div>
          </div>
        </el-dialog>
      </div>
      <div class="notice-list y-box">
        <div class="notice milkbox-dynamic-shadows" v-for="(notice, index) in noticeList" :key="notice.id">
          <div class="notice-title">{{notice.title}}</div>
          <div class="notice-content">{{notice.content}}</div>
          <div class="notice-time x-box">{{notice.time}}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- vue的js文件，必须放到这个地方，放到head中不生效 -->
  <script src="js/notice.js"></script>
</body>

</html>